<template>
  <div class="app-container">
    <!-- 侧边栏 -->
    <el-aside width="200px" class="sidebar">
      <!-- Logo 区域 -->
      <div class="sidebar-logo">
        <div class="logo-icon"></div>
        <span>皮皮虾管理后台</span>
      </div>
      <!-- 菜单区域 -->
      <el-menu
          default-active="dashboard"
          class="sidebar-menu"
          router
          background-color="transparent"
          text-color="#e2e8f0"
          active-text-color="#ffffff"
          active-background-color="#f97316"
      >
        <el-menu-item index="dashboard">
          <el-icon><Grid /></el-icon>
          <span>控制台</span>
        </el-menu-item>
        <el-menu-item index="user">
          <el-icon><User /></el-icon>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="checklist">
          <el-icon><Document /></el-icon>
          <span>内容管理</span>
        </el-menu-item>
        <el-menu-item index="comment">
          <el-icon><ChatDotRound /></el-icon>
          <span>评论管理</span>
        </el-menu-item>
        <el-menu-item index="ranking">
          <el-icon><Star /></el-icon>
          <span>热门榜单</span>
        </el-menu-item>
        <el-sub-menu index="system">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统</span>
          </template>
          <el-menu-item index="system/notice">消息通知</el-menu-item>
          <el-menu-item index="system/config">系统设置</el-menu-item>
<!--          <el-menu-item index="system/stat">数据统计</el-menu-item>-->
        </el-sub-menu>
        <el-menu-item @click="logout">
          <el-icon><Logout /></el-icon>
          <span>退出登录</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <!-- 主内容区 -->
    <el-container class="main-container">
      <el-header class="topbar">
        <div class="topbar-title">管理中心</div>
        <div class="user-info">
          <el-avatar src="https://example.com/admin-avatar.jpg" />
          <span class="username">管理员</span>
        </div>
      </el-header>
      <el-main class="content-area">
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const logout = () => {
  localStorage.removeItem('token');
  router.push('/login');
};
</script>

<style scoped>
.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  background-color: #1e293b;
  color: #e2e8f0;
  border-right: 1px solid #334155;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #334155;
}

.logo-icon {
  width: 32px;
  height: 32px;
  background-color: #f97316;
  border-radius: 4px;
  margin-right: 8px;
}

.sidebar-menu {
  height: calc(100% - 65px);
  padding-top: 16px;
}

.el-menu {
  border-right: none;
}

.el-menu-item:not(.is-active):hover {
  background-color: #334155 !important;
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.topbar-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.user-info {
  display: flex;
  align-items: center;
}

.username {
  margin-left: 8px;
  font-size: 14px;
}

.content-area {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
</style>